<template>
  <div class="book-list">
    <h2>图书列表</h2>
    <!-- 搜索功能区域 -->
    <div class="actions">
      <!-- 下拉选择框移动到搜索栏左侧 -->
      <el-select v-model="search.bookArea" placeholder="选择区位" style="width: 150px; margin-right: 10px" @change="fetchBooks">
        <el-option label="全部" :value="null" />
        <el-option v-for="area in areas" :key="area.areaCodeId" :label="area.areaName" :value="area.areaName" />
      </el-select>
      <el-select v-model="search.bookType" placeholder="选择类型" style="width: 150px; margin-right: 10px" @change="fetchBooks">
        <el-option label="全部" :value="null" />
        <el-option v-for="type in bookTypes" :key="type.typeId" :label="type.typeName" :value="type.typeName" />
      </el-select>
      <el-select v-model="search.bookStatus" placeholder="选择状态" style="width: 150px; margin-right: 10px" @change="fetchBooks">
        <el-option label="全部" :value="null" />
        <el-option label="已借出" value="已借出" />
        <el-option label="可借" value="可借" />
        <el-option label="不可借" value="不可借" />
      </el-select>
      <el-input v-model="search.bookNumber" placeholder="输入图书编号搜索" style="width: 200px; margin-right: 10px" />
      <el-input v-model="search.bookName" placeholder="输入图书名称搜索" style="width: 200px; margin-right: 10px" />
      <el-input v-model="search.bookAuthor" placeholder="输入作者搜索" style="width: 200px; margin-right: 10px" />
      <el-button type="primary" @click="fetchBooks">搜索</el-button>
      <el-divider />
    </div>

    <!-- 图书卡片显示 -->
    <el-row :gutter="20">
      <el-col :span="4" v-for="(book, index) in bookData.content" :key="index">
        <el-card :body-style="{ padding: '20px' }" class="recommend-book-card" @click="viewBookDetail(book.bookNumber)">
          <div class="book-cover-container">
            <el-image :src="getImageUrl(book.bookCover)" alt="封面" class="book-cover" />
          </div>
          <el-link class="book-name">{{ book.bookName }}</el-link>
          <p class="author">作者: {{ book.bookAuthor }}</p>
          <el-text class="description">{{ book.bookDescription }}</el-text>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页组件 -->
    <div class="pagination-actions">
      <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="bookData.totalElements"
          :page-size="pagination.size"
          v-model:current-page="pagination.page"
          @update:current-page="fetchBooks"
          @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '../utils/axios';
import { ElMessage } from 'element-plus';

const router = useRouter();
const bookData = ref({ content: [], totalElements: 0 });
const pagination = ref({ page: 1, size: 12 });
const search = ref({ bookNumber: '', bookName: '', bookAuthor: '', bookArea: '', bookType: '', bookStatus: null });
const loading = ref(false);
const areas = ref([]);
const bookTypes = ref([]);

// 获取图书封面时避免缓存，确保刷新图片
const getImageUrl = (coverName) => {
  if (coverName) {
    return `http://localhost:8080/book/image/${coverName}?t=${new Date().getTime()}`;
  }
  return ''; // 如果没有封面，则返回空字符串
};

// 获取图书列表
const fetchBooks = async () => {
  try {
    loading.value = true;
    const response = await http.post('/book/all', {
      page: pagination.value.page - 1,
      size: pagination.value.size,
      ...search.value});
    if (response.status) {
      bookData.value = response.data;
    } else {
      ElMessage.error(response.data || '获取图书列表失败');
    }
  } catch (error) {
    ElMessage.error('获取图书列表失败：' + error.message);
  } finally {
    loading.value = false;
  }
};

// 获取馆区数据
const fetchAreas = async () => {
  try {
    const response = await http.get('/Area/all');
    if (response.status) {
      areas.value = response.data;
    } else {
      ElMessage.error(response.data || '获取馆区数据失败');
    }
  } catch (error) {
    ElMessage.error('获取馆区数据失败：' + error.message);
  }
};

// 获取图书分类数据
const fetchBookTypes = async () => {
  try {
    const response = await http.get('/Type/all');
    if (response.status) {
      bookTypes.value = response.data;
    } else {
      ElMessage.error(response.data || '获取图书分类失败');
    }
  } catch (error) {
    ElMessage.error('获取图书分类失败：' + error.message);
  }
};

// 分页大小变化
const handleSizeChange = (size) => {
  pagination.value.size = size;
  pagination.value.page = 1;
  fetchBooks();
};

// 查看图书详情
const viewBookDetail = (bookNumber) => {
  if (bookNumber) {
    router.push(`/book/${bookNumber}`);
  } else {
    ElMessage.warning('该图书没有有效的编号，无法查看详情');
  }
};

onMounted(() => {
  fetchBooks();
  fetchAreas();
  fetchBookTypes();
});
</script>

<style scoped>
.book-list {
  padding: 20px;
  background-image: url('../assets/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.actions {
  margin-top: 20px;
}

.pagination-actions {
  margin-top: 20px;
  padding: 10px;
}

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.el-table th,
.el-table td {
  padding: 12px 0;
}

.el-table th {
  background-color: #f5f7fa;
}

/* 推荐书籍卡片样式 */
.recommend-book-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.recommend-book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recommend-book-card .book-cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px; /* 设置封面图片的固定高度 */
}

.recommend-book-card .book-cover {
  max-width: 100%;
  height: 100%; /* 使图片高度占满容器 */
  object-fit: contain; /* 保持图片比例，完全显示 */
  border-radius: 4px; /* 添加圆角 */
}

.recommend-book-card .book-name {
  font-size: 18px;
  margin-top: 10px;
}

.recommend-book-card .author {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px; /* 添加行间距 */
  display: -webkit-box; /* 使用 WebKit 盒模型 */
  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
  -webkit-line-clamp: 1; /* 限制显示一行 */
  line-clamp: 1;
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
}

.recommend-book-card .description {
  font-size: 14px;
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 修改为只显示2行 */
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* el-row 和 el-col 的间距 */
.el-row {
  margin-bottom: 20px; /* 添加行间距 */
}

.el-col {
  margin-bottom: 20px; /* 添加列间距 */
}
</style>
